<template>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="props.listCount"
    :page-sizes="[5, 10, 20]"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 使用js方式写emit
// const emit = defineEmits(['update:page', 'update:limit'])

// 使用ts方式写emit
// 其中第二个参数中的键是自定义的即page和limit是自定义的
interface EmitsType {
(e: 'update:page', page: number): void
(e: 'update:limit', limit: number): void
}
const emit = defineEmits<EmitsType>()
// 使用js方式写props
// const props = defineProps({
//   listCount: {
//     type: Number,
//     default: 0
//   },
//   page: {
//     type: Number,
//     default: 1
//   },
//   limit: {
//     type: Number,
//     default: 10
//   },
//   loadList: {
//     type: Function,
//     default: () => {}
//   }
// })
// 使用ts写props
interface Props {
  listCount: number
  page: number
  limit: number
  loadList: Function
}
// 使用ts写props时如果要给props给默认值的话需要使用withDefaults方法，这个方法直接使用不需要引入
const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  loadList: () => {}
})
console.log(props)

const count = ref(0)
console.log(count.value)

const handleCurrentChange = (page: number) => {
  emit('update:page', page)
  props.loadList()
}

const handleSizeChange = (size: number) => {
  // 因为使用了双向绑定所以使用update:page这种形式
  emit('update:page', 1)
  emit('update:limit', size)
  props.loadList()
}

</script>

<style lang="scss" scoped>
a {
  color: $nav-color;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
